<template>
	<view class="home" :style="{paddingTop:top+'px'}">
		年龄为{{  age }}
		<view @tap="uptAge(10)">修改年龄</view>
		<!-- #ifdef H5 -->
		<view>
			h5 
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view>
			微信小程序
		</view>
		<!-- #endif -->
		<view class="color">
			文字颜色在h5平台为红色 在小程序平台为蓝色
		</view>
		home
		{{ name }}
		<view  v-for="(item,index) in list" @tap="events(index)" :class="current == index ? 'red' : ''" :key="item.name">
			{{ item.name }}
		</view>
		<view v-if="isShow">
			控制元素显示隐藏
		</view>
		
		<view class="box"></view>
		 <swiper class="swiper" >
			<swiper-item v-for="item in bannerList" :key="item.id">
				<image class="img" :src="item.pic" mode=""></image>
			</swiper-item>
			
		</swiper>
		<!-- https://uniapp.dcloud.io/use?id=vue%e7%89%b9%e6%80%a7%e6%94%af%e6%8c%81%e8%a1%a8 -->
		<!-- 1. Vue.nextTick  尽量少使用 -->
		<!-- 2. Vue.directive  尽量少使用 -->
		<!-- 3. activated deactivated -->
		<!-- 4. is component -->
		<!-- 5. transition  transition-group -->
		<!-- 6. keep-alive -->
	</view>
</template>

<script>
	import {
		bannerAds,
		categorys,
		findProductList
	} from "../../api/home/index.js"
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex"
	export default {
		computed:{
			...mapState(["age"])
		},
		methods:{
			...mapMutations(["uptAge"]),
			events(index){
				this.current = index
			}
		},
		// created(){
			//this.$route
		// },
		
		onPullDownRefresh(){
			console.log("下拉触发了");
			findProductList(1,10,{
				categoryId :"1308339256886423554",
				isDesc :0
			})
			.then(res =>{
				// 终止下拉状态
				uni.stopPullDownRefresh ()
				
			})
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			var menu = uni.getMenuButtonBoundingClientRect();
			console.log(menu);
			this.top = menu.top + menu.height
			// #endif
			
			// var _this = this;
			// categorys("1308336521604599809")
			
			// findProductList(1,10,{
			// 	categoryId :"1308339256886423554",
			// 	isDesc :0
			// })
			// .then(res =>{
			// 	console.log("分类数据未",res)
			// })
			// bannerAds()
			// .then(res =>{
			// 	console.log(res);
			// 	this.bannerList = res.data.items;
			// })
						// uni.request({
			// 	url:"http://leju.bufan.cloud/lejuClient/home/bannerAds",
			// 	method:"GET",
			// 	timeout:5000,
			// 	success(res){
			// 			console.log(res);
			// 		_this.bannerList =res.data.data.items;
			// 	}
			// })
		},
		data() {
			return {
				name:"张三",
				current:0,
				bannerList:[],
				top:0,
				
				list:[
					{
						name:"苹果"
					},
					{
						name:"香蕉"
					},
					{
						name:"橘子"
					},
				],
				isShow:false
			};
		}
	}
</script>

<style lang="scss" scoped>
	.color{
		/* #ifdef H5 */
		color: red;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		color: blue;
		/* #endif */
	}
	.home{
		// padding-top: var(--status-bar-height);
		.box{
			width: 208rpx;
			height: 140rpx;
			background: red;
		}
		.img{
			width: 100%;
		}
	}
	.red{
		color: red;
	}
</style>
